import React from "react";
import type { FormProps } from "antd";
import { Button, Checkbox, Form, Input } from "antd";
import instance from "../../api/request";
import { useNavigate } from "react-router-dom";
function Index() {
  type FieldType = {

    password?: string;
    account?: string;
  };
const nav=useNavigate()
  const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
    console.log("Success:", values);
    instance.post('/login',values).then(res=>{
        if(res.data.token){
            localStorage.setItem('token',res.data.token)
            localStorage.setItem('userId',res.data.userId)
            localStorage.setItem('https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',res.data.pic)
            nav('/home')
        }
    })
  };

  const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (
    errorInfo
  ) => {
    console.log("Failed:", errorInfo);
  };
  return (
    <div className="ok">
        
        <h1>物联网综合业务支撑平台</h1>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item<FieldType>
          label="账号"
          name="account"
          rules={[{ required: true, message: "请输入账号!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item<FieldType>
          label="密码"
          name="password"
          rules={[{ required: true, message: "请输入密码!" },
            {
                pattern:/w[6,12]$/,
                message:'密码是6-12位数'
            }
          ]}
          
        >
          <Input.Password />
        </Form.Item>
        <Form.Item label={null}>
          <Button type="primary" htmlType="submit">
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

export default Index;
